//自动切换图片
(function ()
{
	var switchLeft = document.getElementById("switch_left");
	var switchRight = document.getElementById("switch_right");
	var img_wrap = document.getElementById("img_wrap");
	var defaultSelect = 0;
	var timeId = 1;
	switchLeft.onclick = function ()
	{
		if (defaultSelect != 0)
		{
			clearAutoLoop();
			setSelect(defaultSelect = 0);
			autoLoop(3000);
		}
	}

	switchRight.onclick = function ()
	{
		if (defaultSelect != 1)
		{
			clearAutoLoop();
			setSelect(defaultSelect = 1);
			autoLoop(3000);
		}
	}

	function setSelect(selectIndex)
	{
		if (selectIndex == 0)
		{
			switchRight.style.backgroundImage = "url(./img/banner_pag_5945daa.png)";
			switchLeft.style.backgroundImage = "url(./img/banner_pag_ex_aeb2cde.png)";
			img_wrap.style.transform = "translateX(0)";
		} else
		{
			img_wrap.style.transform = "translateX(-722px)";
			switchRight.style.backgroundImage = "url(./img/banner_pag_ex_aeb2cde.png)";
			switchLeft.style.backgroundImage = "url(./img/banner_pag_5945daa.png)";
		}
	}

	function autoLoop(interval)
	{
		clearAutoLoop();
		timeId = setTimeout(function ()
		{
			setSelect(defaultSelect = defaultSelect == 0 ? 1 : 0);
			autoLoop(interval);
		}, interval);
	}

	function clearAutoLoop()
	{
		if (timeId > 0)
		{
			clearTimeout(timeId);
			timeId = 0;
		}
	}

	switchRight.onclick();
})();


//新闻导航
(function ()
{
	var newsObj = {
		"0": [
			{content: "8月11日定期维护公告", date: ""},
			{content: "【公告】8月4日定期维护公告", date: "08-03"},
			{content: "【公告】7月28日定期维护公告", date: "07-27"},
		],
		"1": [
			{content: "【新闻】全新《梦幻西游网页版》公测开启！来了就是大神", date: "06-05"},
			{content: "【新闻】《梦幻西游网页版》官方多平台数据互通说明", date: "05-19"},
			{content: "【新闻】来了就是大神！《梦幻西游网页版》游戏介绍", date: "05-13"},
		],
		"2": [
			{content: "【攻略】《梦幻西游网页版》捉鬼任务", date: "05-18"},
			{content: "【攻略】《梦幻西游网页版》主线任务", date: "05-18"},
			{content: "【攻略】《梦幻西游网页版》玄武堂任务", date: "05-18"},
		],
		"3": [
			{content: "【公告】8月11日定期维护公告", date: "08-10"},
			{content: "【公告】8月4日定期维护公告", date: "08-03"},
			{content: "【公告】7月28日定期维护公告", date: "08-27"},
		],
	}

	var news = document.getElementsByClassName("news");
	for (var i = 0, len = news.length; i < len; i++)
	{
		var child = news[i];
		child.onmouseleave = onNewsOver.bind(this, i);
		child.onmouseover = onNewsOver.bind(this, i);
	}

	function onNewsOver(idx, ev)
	{
		var target = ev.target;
		for (var i = 0, len = news.length; i < len; i++)
		{
			var child = news[i];
			if (child != target)
			{
				child.style.borderBottom = "0";
				child.style.color = "#ccbca1";
				child.style.fontWeight = "normal";
			} else
			{
				child.style.fontWeight = "bold";
				child.style.color = "#ffe293";
				child.style.borderBottom = "3px solid #ffe293";
			}
		}

		var news_items = document.getElementsByClassName("news_item");
		for (var i = 0, len = news_items.length; i < len; i++)
		{
			var child = news_items[i];
			if (i != 0)
			{
				child.firstElementChild.textContent = newsObj[idx][i].content;
				child.lastElementChild.textContent = newsObj[idx][i].date;
			} else
			{
				child.children[1].textContent = newsObj[idx][i].content;
				child.lastElementChild.textContent = newsObj[idx][i].date;
			}
		}

		var news_flag = document.getElementsByClassName("news_flag")[0];
		//最新的元素 加粗
		if (idx == 0)
		{
			news_flag.style.display = "block";
			news_items[0].style.fontSize = "16px";
			news_items[0].style.fontWeight = "bold";
			news_items[0].style.color = "#ffe293";
			news_items[0].children[1].style.paddingLeft = "5px";
		} else
		{
			news_flag.style.display = "none";
			news_items[0].style.color = "#ccbca1";
			news_items[0].children[1].style.paddingLeft = "20px";
			news_items[0].style.fontWeight = "normal";
			news_items[0].style.fontSize = "13px";
		}
	}

	onNewsOver(0, {target: news[0]});
})();


//职业
(function ()
{
	var datas = {
		0: {
			0: {
				portraitUrl: "./img/jxk_df4e529.png",
				nameUrl: "./img/jxk_71305a6.png",
				races: [
					"霜刃露锋芒，飒沓如流星",
					"剑侠客率情任性，狂放不羁。一生淡泊名利，嗜武如痴。英雄义，儿女情，独自闯江湖半生醉，举杯邀约最销魂。"
				]
			},
			1: {
				portraitUrl: "./img/wmr_b05939e.png",
				nameUrl: "./img/wmr_bfb4daf.png",
				races: [
					"嫣然巧笑踏绿萝，一路银铃一路歌",
					"巫蛮儿质朴单纯，灵动可人，生性善良，活泼可爱。花盈翠影出神木，环佩婉转披香来。"
				]
			},
			skill: [
				{
					icon: "./img/r1_f2989ac.png",
					name: "落叶萧萧",
					desc: "秒十法术"
				},
				{
					icon: "./img/r2_ceeb7ce.png",
					name: "唧唧歪歪",
					desc: "秒三法术"
				},
				{
					icon: "./img/r3_ea1b3bd.png",
					name: "五雷咒",
					desc: "单秒法术"
				},
				{
					icon: "./img/r4_fd29cb2.png",
					name: "长驱直入",
					desc: "物理单秒"
				},
				{
					icon: "./img/r5_921f7b4.png",
					name: "横扫千军",
					desc: "物理四连"
				}
			]
		},
		1: {
			0: {
				portraitUrl: "./img/spl_bdfd30d.png",
				nameUrl: "./img/spl_82ae928.png",
				races: [
					"一啸生风雪，长歌动寒霜。",
					"杀破狼飘逸潇洒，气宇轩昂，能文能武，卓尔不群，身具神秘的天狼血统，纵横骄天下，傲立三界间。"
				]
			},
			1: {
				portraitUrl: "./img/gjl_a7145ed.png",
				nameUrl: "./img/gjl_7e622d1.png",
				races: [
					"眉黛春山秀， 横波剪秋水",
					"骨精灵娇妍调皮，顾盼神飞，机敏聪慧，爱打不平，对世间万物充满好奇。"
				]
			},
			skill: [
				{
					icon: "./img/m1_e0b8f9c.png",
					name: "飞砂走石",
					desc: "秒十法术"
				},
				{
					icon: "./img/m2_8e73234.png",
					name: "阎罗令",
					desc: "秒三法术"
				},
				{
					icon: "./img/m3_e8ee8fd.png",
					name: "三昧真火",
					desc: "单秒法术"
				},
				{
					icon: "./img/m4_1eb4ba1.png",
					name: "狮搏",
					desc: "物理单秒"
				},
				{
					icon: "./img/m5_2aa9f71.png",
					name: "连环击",
					desc: "物理四连"
				}
			]
		},
		2: {
			0: {
				portraitUrl: "./img/ltz_c57f219.png",
				nameUrl: "./img/ltz_225c130.png",
				races: [
					"乘风破浪翔碧海，腾云驾雾上青天",
					"禀承龙族之血统，生性争强好胜，桀骜不驯。龙太子凭借天生的优势领悟仙法精髓，是当之无愧的龙族骄子。"
				]
			},
			1: {
				portraitUrl: "./img/wtj_f94acf0.png",
				nameUrl: "./img/wtj_43e48bb.png",
				races: [
					"嫣然巧笑踏绿萝，一路银铃一路歌",
					"巫蛮儿质朴单纯，灵动可人，生性善良，活泼可爱。花盈翠影出神木，环佩婉转披香来。"
				]
			},
			skill: [
				{
					icon: "./img/x1_cc1fe17.png",
					name: "龙卷雨击",
					desc: "秒十法术"
				},
				{
					icon: "./img/x2_8d38fa8.png",
					name: "雷霆万钧",
					desc: "秒三法术"
				},
				{
					icon: "./img/x3_eb1f142.png",
					name: "龙腾",
					desc: "单秒法术"
				},
				{
					icon: "./img/x4_f555f86.png",
					name: "浪涌",
					desc: "物理单秒"
				},
				{
					icon: "./img/x5_b1f036b.png",
					name: "天命剑法",
					desc: "物理四连"
				}
			]
		}
	};
	var job = 0;//职业默认
	var sex = 0;//性别默认
	var jobTabOnUrls = ["./img/zz_r_ex_2387bd4.png", "./img/zz_m_ex_1836f8d.png", "./img/zz_x_ex_1715e59.png"];//职业选中
	var jobTabNormalUrls = ["./img/zz_r_fa6aaa2.png", "./img/zz_m_340fc9d.png", "./img/zz_x_ec49c9c.png"];//职业正常
	var sexTabOnUrls = ["./img/sex_man_ex_3685b5a.png", "./img/sex_woman_ex_f9a0908.png"];//性别选中
	var sexTabNormalUrls = ["./img/sex_man_36d7840.png", "./img/sex_woman_045e02e.png"];//性别正常

	//职业，性别
	var titles = document.getElementsByClassName("title");
	var sexs = document.getElementsByClassName("sex");

	//技能，名称，立绘
	var skill_p1 = document.getElementById("skill_p1");
	var skill_p2 = document.getElementById("skill_p2");
	var hero_name = document.getElementById("hero_name");
	var hero_pic = document.getElementById("hero_pic");


	//技能图标，技能标题，技能描述
	var skill_divs = document.getElementsByClassName("skill_div");
	var skill_titles = document.getElementsByClassName("skill_title");
	var skill_contens = document.getElementsByClassName("skill_content");

	//职业监听
	for (var i = 0, len = titles.length; i < len; i++)
	{
		var child = titles[i];
		// child.onmouseleave = onOverOrLeaveHandler.bind(this, i, "job");
		child.onmouseover = onOverOrLeaveHandler.bind(this, i, "job");
	}

	//性别监听
	for (var i = 0, len = sexs.length; i < len; i++)
	{
		var child = sexs[i];
		// child.onmouseleave = onOverOrLeaveHandler.bind(this, i, "sex");
		child.onmouseover = onOverOrLeaveHandler.bind(this, i, "sex");
	}

	//鼠标移入移出
	var sexDetail = document.getElementsByClassName("sex_detail")[0];
	var timeId = 0;

	function onOverOrLeaveHandler(idx, type, ev)
	{
		var displayObjs, onUrls, normalUrls;
		if (ev.type == "mouseover")
		{
			sexDetail.style.opacity = 0;
			sexDetail.style.transition = "none";

			hero_pic.style.opacity = 0;
			hero_pic.style.transition = "none";

			clearTimeout(timeId);
			timeId = setTimeout(function ()
			{
				clearTimeout(timeId);
				sexDetail.style.transition = "opacity .8s ease-in-out";
				sexDetail.style.opacity = 1;

				hero_pic.style.opacity = 1;
				hero_pic.style.transition = "opacity .8s ease-in-out";

			}, 100);

		}

		if (type == "job")
		{
			job = idx;
			displayObjs = titles;
			onUrls = jobTabOnUrls;
			normalUrls = jobTabNormalUrls;
		} else if (type == "sex")
		{
			sex = idx;
			displayObjs = sexs;
			onUrls = sexTabOnUrls;
			normalUrls = sexTabNormalUrls;
		}
		for (var i = 0, len = displayObjs.length; i < len; i++)
		{
			var child = displayObjs[i];
			if (i == idx)
			{
				child.style.backgroundImage = "url(" + onUrls[idx] + ")";
			} else
			{
				child.style.backgroundImage = "url(" + normalUrls[i] + ")";
			}
		}
		updateData(job, sex);
	}

	function updateData(job, sex)
	{
		var data = datas[job][sex];
		if (data)
		{
			var skills = datas[job].skill;
			hero_name.src = data.nameUrl;
			hero_pic.src = data.portraitUrl;
			skill_p1.innerText = data.races[0];
			skill_p2.innerText = data.races[1];

			for (var i = 0; i < skill_divs.length; i++)
			{
				skill_divs[i].style.background = "url(" + skills[i].icon + ") center no-repeat";
				skill_titles[i].textContent = skills[i].name;
				skill_contens[i].textContent = skills[i].desc;
			}
		}
	}

	//设置默认
	onOverOrLeaveHandler(job, "job", titles[job]);
	onOverOrLeaveHandler(sex, "sex", sexs[sex]);
})();

//游戏特色
(function ()
{
	var features = document.getElementsByClassName("feature");
	var feature_intro = document.getElementsByClassName("feature_intro")[0];
	var intro_urls = ["./img/1_973b62b.jpg", "./img/2_06c9f09.jpg", "./img/3_2680cdb.jpg", "./img/4_40b4a8d.jpg"];
	var currentIdx = 0;

	for (var i = 0, len = features.length; i < len; i++)
	{
		var child = features[i];
		child.onmouseover = onFeatureOver.bind(this, i, child);
	}

	function onFeatureOver(idx, target, ev)
	{
		var parent = target.parentElement;
		if (parent)
		{
			var refTarget = target.nextElementSibling;
			parent.insertBefore(feature_intro, refTarget);
			feature_intro.style.backgroundImage = "url(" + intro_urls[idx] + ")";

			var childs = parent.children;
			var initX = 0;

			var needs = [];
			if (idx > currentIdx)//左移
			{
				needs = Array.prototype.slice.call(features, currentIdx + 1, idx + 1);
			} else if (idx < currentIdx)//右移
			{
				needs = Array.prototype.slice.call(features, idx + 1, currentIdx + 1);
			}
			for (var i = 0; i < childs.length; i++)
			{
				var child = childs[i];
				if (needs.indexOf(child) != -1)
				{
					child.style.transition = "left .2s ease-in-out";
				} else
				{
					child.style.transition = "none";
				}
				child.style.left = initX + "px";
				initX += child.getBoundingClientRect().width;
			}
		}
		currentIdx = idx;
	}

	//设置默认选中第一项
	onFeatureOver(currentIdx = 0, features[0]);
})();